<template>
  <div class="all">
    <header class="">
      <div class="div" @click="goBack()">
        <img src="../../assets/返回.png" alt="">
        <span>返回</span>
      </div>
      <div class="div">
        <span>全部功能</span>
      </div>
      <div class="div"></div>
    </header>
    <div class="content">
      <div class="title1">
        <a class="hengGang"></a>
        <span >首页功能</span>
      </div>
      <ul>
        <li v-for="(item, index) in mainMenuList" :key="index" @click="jump(item.MENU_URL, item)">
          <img :src="item.MENU_ICON" alt="">
          <span>{{item.MENU_NAME}}</span>
        </li>
      </ul>
      <div class="title1">
        <a class="hengGang"></a>
        <span >其他功能</span>
      </div>
      <ul>
        <li v-for="(item, index) in menuList" :key="index" @click="jump(item.MENU_URL, item)">
          <img :src="item.MENU_ICON" alt="">
          <span>{{item.MENU_NAME}}</span>
        </li>
      </ul>
    </div>
    <van-dialog v-model="pwdShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="请输入该模块密码"
                @confirm="pwdConfirm()"
                show-cancel-button>
      <input type="password" id="pwd" class="pwdInp" autofocus v-model="password">
    </van-dialog>
  </div>
</template>

<script>
// import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'More',
  data () {
    return {
      mainMenuList: [],
      menuList: [],
      userid: '',
      pwdShow: false,
      password: '',
      url: ''
    }
  },
  mounted () {
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    this.getMenu()
    // $('.content').css('height', $(window).height() - $('.content').offset().top + 'px')
  },
  methods: {
    // 密码输完确认
    pwdConfirm () {
      this.checkMenuPwd()
    },
    // 密码检验
    checkMenuPwd () {
      this.$http.checkMenuPass({menu_id: this.item.ID, password: this.password})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.password = ''
            if (this.item.MENU_URL.split('/')[0] === ':CLIENT') {
              if (sessionStorage.getItem('sys') === 'ANDROID') {
                var ff = this.item.MENU_URL.split('/')[1]
                window.WebViewJavascriptBridge.callHandler(ff, {'param': ''}, function (responseData) {})
              } else {
                Toast('请在App上使用本功能')
              }
            } else {
              // 跳转1
              window.location.href = this.item.MENU_URL
            }
          } else {
            Toast(res.data.msg)
            this.pwdShow = true
            this.password = ''
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击菜单跳转
    jump (url, item) {
      if (url !== '#') {
        this.item = item
        this.checkMenuPwd()
        // if (url.split('/')[0] === ':CLIENT') {
        //   if (sessionStorage.getItem('sys') === 'ANDROID') {
        //     var ff = url.split('/')[1]
        //     window.WebViewJavascriptBridge.callHandler(ff, {'param': ''}, function (responseData) {})
        //   } else {
        //     Toast('请在App上使用本功能')
        //   }
        // } else {
        //   // 跳转1
        //   window.location.href = url
        // }
      } else {
        Toast('功能正在开发中，敬请期待...')
      }
    },
    // 返回
    goBack () {
      this.$router.go(-1)
    },
    // 获取菜单
    getMenu () {
      //  http://jmx-kfdj.com/kfhl/miniindex/getMenus
      this.$http.getMenus({USER_ID: this.userid})
        .then(res => {
          console.log(res)
          for (var i = 0; i < res.data.length; i++) {
            if (i < 11) {
              // 所有菜单
              // this.menuList.push(res.data[i])
              this.mainMenuList.push(res.data[i])
            } else {
              this.menuList.push(res.data[i])
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1DA4F2;
    background: #FFFFFF;
    position: sticky;
    top: 0;
  }
  header img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  header div{
    width: 33%;
    display: flex;
    align-items: center;
  }
  .div:nth-child(2){
    justify-content: center;
    color: #333333;
  }
  .content{
    overflow: auto;
    padding: 10px 0;
    box-sizing: border-box;
  }
   ul {
    width: 100%;
    height: auto;
    background: #fff;
    /*background: linear-gradient(90deg, #1DA3F2 , #1DC7F2 );*/
    /*margin-top: 10px;*/
    display: flex;
    flex-wrap: wrap;
     margin-bottom: 5px;
  }
   ul li{
    width: 25%;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  }
   ul li img{
    width: 28px;
    height: 28px;
    margin-bottom: 5px;
  }
  .title1{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    background: #ffffff;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin: 0 8px 0 15px;
  }
  .pwdInp{
    width: 80%;
    height: 40px;
    margin: 20px 10%;
    /*margin: 10px 15%;*/
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid #1DA4F2;
    box-sizing: border-box;
  }
  .pwdInp:focus{
    border-color: #1DA4F2;
  }
</style>
